<ion-side-menus enable-menu-with-back-views="true"
                bind-notifier="{locale:$root.settings.locale.id}">
  <!-- HEADER -->
  <ion-side-menu-content>
    <ion-nav-bar class="bar-dark" title-align="left">
      <ion-nav-back-button class="no-text">
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear icon ion-navicon visible-nomenu" menu-toggle="left" ></button>
      </ion-nav-buttons>
      <ion-nav-buttons side="right" >

        <!-- current node info -->
        <button class="button button-clear hidden-xs hidden-sm gray icon-left"
                ng-if="$root.settings.expertMode"
                style="max-width: 450px !important;"
                ng-click="showPeerInfoPopover($event)">
          <small class="ion-locked" ng-if="$root.currency.node.useSsl">&nbsp;</small>
          {{$root.currency.node.host}}{{$root.currency.node.port != 80 && $root.currency.node.port != 443 ? ':'+$root.currency.node.port : ''}}
          <small>&nbsp;</small>
          <small class="ion-arrow-down-b"></small>
        </button>

        <!-- Allow extension here -->
        <cs-extension-point name="nav-buttons-right"></cs-extension-point>

        <!-- profile -->
        <a id="helptip-header-bar-btn-profile"
           class="button button-icon button-clear hidden-xs hidden-sm"
           ng-click="showProfilePopover($event)">
          <i class="avatar avatar-member"
             ng-if="!walletData.avatar"
             ng-class="{'disable': !login, 'royal-bg': login}">
          </i>
          <i class="avatar"
             ng-if="walletData.avatar"
             style="background-image: url('{{walletData.avatar.src}}')">
          </i>
          <span ng-if="login && !auth"
                class="badge badge-button badge-secondary badge-assertive ion-locked"> </span>
        </a>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <!-- MENU -->
  <ion-side-menu id="menu"
                 side="left"
                 expose-aside-when="large"
                 enable-menu-with-back-views="false"
                 width="225">
    <ion-header-bar>
      <h1 class="title dark hidden-sm hidden-xs" >
        <span class="animate-fade-in animate-show-hide ng-hide" ng-show="$root.currency.name">
          {{:locale:'COMMON.APP_NAME'|translate}} {{$root.currency.name|abbreviate}}
        </span>
      </h1>

      <div class="visible-sm visible-xs hero">
        <div class="content">
          <i class="avatar avatar-member hero-icon" ng-if="!walletData.avatar" ng-class="{'royal-bg': login, 'stable-bg': !login}" ng-click="!login ? showHome() : loginAndGo()" menu-close></i>
          <a class="avatar hero-icon" ng-if="walletData.avatar" style="background-image: url('{{walletData.avatar.src}}')" ui-sref="app.view_wallet" menu-close></a>
          <h4 ng-if="login">
            <a class="light" ui-sref="app.view_wallet" menu-close>
              {{walletData.name||walletData.uid}}
              <span ng-if="!walletData.name && !walletData.uid"><i class="icon ion-key"></i>&nbsp;{{walletData.pubkey|formatPubkey}}</span>
            </a>
          </h4>
          <h4 ng-if="!login">
            <a class="light" ui-sref="app.login"
               menu-close>
              {{'COMMON.BTN_LOGIN'|translate}}
              <i class="ion-arrow-right-b"></i>
            </a>
          </h4>
          <cs-extension-point name="menu-profile-user"></cs-extension-point>
        </div>
        <!-- logout -->
        <a ng-if="login" class="button-icon" ng-click="logout({askConfirm: true})" style="position: absolute; top: 5px; left: 5px; z-index: 999;">
          <i class="icon stable ion-android-exit"></i>
        </a>
      </div>
    </ion-header-bar>

    <ion-content scroll="false">
      <ion-list class="list">

        <!-- Home -->
        <ion-item menu-close class="item-icon-left hidden-xs" ui-sref="app.home" active-link="active">
          <i class="icon ion-home"></i>
          {{:locale:'MENU.HOME'|translate}}
        </ion-item>

        <a menu-close
           class="item item-icon-left"
           active-link="active"
           active-link-path-prefix="#/app/currency"
           ui-sref="app.currency">
          <i class="icon ion-ios-world-outline"></i>
          {{:locale:'MENU.CURRENCY'|translate}}
        </a>
        <a id="helptip-menu-btn-currency"></a>

        <a menu-close
           class="item item-icon-left hidden-xs hidden-sm"
           active-link="active"
           active-link-path-prefix="#/app/network"
           ui-sref="app.network">
          <i class="icon ion-cloud"></i>
          {{:locale:'MENU.NETWORK'|translate}}
        </a>
        <a id="helptip-menu-btn-network"></a>

        <!-- Allow extension here -->
        <cs-extension-point name="menu-discover"></cs-extension-point>

        <!-- MAIN Section -->
        <div class="item item-divider"></div>

        <a menu-close class="item item-icon-left"
           active-link="active"
           active-link-path-prefix="#/app/wot"
           ui-sref="app.wot_lookup.tab_search">
          <i class="icon ion-person-stalker"></i>
          {{:locale:'MENU.WOT'|translate}}
        </a>
        <a id="helptip-menu-btn-wot"></a>

        <!-- Allow extension here -->
        <cs-extension-point name="menu-main"></cs-extension-point>

        <!-- USER Section -->
        <div class="item item-divider"></div>

        <a menu-close
           class="item item-icon-left"
           active-link="active"
           active-link-path-prefix="#/app/account"
           ui-sref="app.view_wallet"
           ng-class="{'item-menu-disable': !login}">
          <i class="icon ion-person"></i>
          {{:locale:'MENU.ACCOUNT'|translate}}
        </a>
        <a id="helptip-menu-btn-account"></a>

        <a menu-close
           class="item item-icon-left "
           active-link="active"
           active-link-path-prefix="#/app/wallets"
           ui-sref="app.view_wallets"
           ng-class="{'item-menu-disable': !login}">
          <i class="icon ion-card " style="top: -5px; left: 22px; font-size: 18px;"></i>
          <i class="icon-secondary ion-card" style="top: 22px; left: 19px; font-size: 20px; background-color: white; width:17px; height: 14px;"></i>
          {{:locale:'MENU.WALLETS'|translate}}
        </a>

        <a menu-close
           class="item item-icon-left"
           active-link="active"
           active-link-path-prefix="#/app/history"
           ui-sref="app.view_wallet_tx"
           ng-class="{'item-menu-disable': !login}">
          <i class="icon ion-card"></i>
          {{:locale:'MENU.TRANSACTIONS'|translate}}
        </a>
        <a id="helptip-menu-btn-tx"></a>


        <div class="item item-divider visible-xs visible-sm"></div>

        <!-- Allow extension here -->
        <cs-extension-point name="menu-user"></cs-extension-point>

        <a menu-close
           class="item item-icon-left visible-xs visible-sm"
           active-link="active"
           active-link-path-prefix="#/app/settings"
           ui-sref="app.settings">
          <i class="icon ion-android-settings"></i>
          {{:locale:'MENU.SETTINGS'|translate}}
        </a>
        <a id="helptip-menu-btn-settings"></a>

        <!-- actions divider -->
        <div class="item item-divider" ng-if="login"></div>


        <ion-item menu-close class="item  item-button-right" ng-if="login"
          ng-class="::{'item-button-left': $root.device.barcode.enable}">
          <!-- transfer -->
          <button
            class="button button-positive ink-dark"
            ng-click="showTransferModal()">
            <i class="icon ion-paper-airplane"></i>
          </button>

          <!-- scan QR code -->
          <button class="button button-stable ink"
                  ng-if="$root.device.barcode.enable"
                  ng-click="scanQrCodeAndGo()">
            <i class="icon ion-qr-scanner"></i>
          </button>
        </ion-item>

        <cs-extension-point name="menu-actions"></cs-extension-point>

      </ion-list>

    </ion-content>

    <!-- removeIf(device) -->
    <ion-footer-bar class="bar-stable footer hidden-xs hidden-sm" >
      <a class="pull-left icon-help" menu-toggle="left" title="{{:locale:'HOME.BTN_HELP'|translate}}" ui-sref="app.help"></a>

      <a class="title gray" ng-click="showAboutModal()" >

        <!-- version -->
        <span title="{{:locale:'HOME.BTN_ABOUT'|translate}}"
              ng-class="{'assertive': $root.newRelease}">
          <!-- warning icon, if new version available -->
          <i ng-if="$root.newRelease" class="ion-alert-circled assertive"></i>

          {{:locale:'COMMON.APP_VERSION'|translate:{version: config.version} }}
        </span>
        |
        <!-- about -->
        <span title="{{:locale:'HOME.BTN_ABOUT'|translate}}">
          {{:locale:'HOME.BTN_ABOUT'|translate}}
        </span>
      </a>


    </ion-footer-bar>
    <!-- endRemoveIf(device) -->
  </ion-side-menu>


</ion-side-menus>
